CSS Interview Questions and Answers for Freshers
Answer: CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in a markup language like HTML. It allows web designers to control the presentation of web pages, including the layout, colors, and fonts.
2.What is the difference between CSS and CSS3?:Answer: CSS3 is the latest version of CSS, introducing new features and enhancements beyond CSS2. Some notable additions in CSS3 include rounded corners, gradients, transitions, and animations.
3.What is a CSS selector?Answer: A CSS selector is a pattern used to select and style HTML elements in a document. It defines which elements the associated styles should be applied to.
Syntax for CSS Selectors:The basic syntax for a CSS selector is selector { property: value; }. For example:
h1 {
color: blue;
}
4.What is the difference between class and ID selectors?
Answer: Class selectors start with a period (.), and multiple elements can share the same class. ID selectors start with a hash (#), and each ID should be unique on a page.
Define a Class in CSS:.myClass {
font-size: 16px;
color: #333;
}
Define an ID in CSS:
#myID {
background-color: #f0f0f0;
padding: 10px;
}
5. What is the difference between padding and margin?
Answer: Padding is the space inside an element, while margin is the space outside the element.
6.What is the box model in CSS?Answer: The box model describes how elements are laid out in terms of content, padding, border, and margin.
7.What is the cascade in CSS?Answer: The cascade is the process of combining styles from different sources and determining the final styles applied to an element.
8.What is the specificity of a CSS selector?Answer: Specificity is a measure of the weight of a selector. ID selectors have higher specificity than class selectors.
9.What is the order of precedence for CSS rules?Answer:Styles declared later in the stylesheet or with higher specificity take precedence.
10.What is the difference between the display and visibility properties?Answer: display determines how an element is shown, while visibility hides or shows an element without affecting the layout.
11.what is Pseudo-Class in CSS?Answer: A pseudo-class is used to define a special state of an element, like :hover for the hover state.
12.What is the difference between the float and clear properties?Answer: float is used to position an element to the left or right, while clear prevents an element from being adjacent to a floated element
13. What is the difference between absolute and relative positioning?Answer:absolute positions an element relative to its nearest positioned ancestor, while relative positions an element relative to its normal position.
14.How do you create a fixed position element?Answer: Creating a Fixed Position Element:
.fixed-element {
position: fixed;
top: 0;
left: 0;
}
14.What is the difference between inline and block elements?
Answer:Inline elements flow within the content and do not start on a new line, similar to inline-block elements. However, inline-block elements allow setting width and height.
15.How do you create a responsive design in CSS?Answer:Use media queries to adapt styles based on the device characteristics, like screen size.
16.What is a media query in CSS?Answer: Media queries apply styles based on certain conditions, such as screen width.
17.What are the different types of media queries in CSS?Answer:Types of Media Queries:
- screen
- all
- speech
Answer:Print stylesheets are designed for printed pages, while screen stylesheets are for on-screen display.
19.What is the difference between em and rem units in CSS?Answer:px is a fixed-size unit, while em is relative to the font-size of its parent.
20.What is the difference between the flex and grid layout systems?Answer:Flexbox is a one-dimensional layout system, while Grid is a two-dimensional layout system.
21.What is the difference between the justify-content and align-items properties?Answer:justify-content aligns items on the main axis, while align-items aligns items on the cross axis.
22.What is the difference between the transform and transition properties?Answer:transform applies 2D and 3D transformations to an element, while transition adds animated transitions to properties.